/**
 * Dialog组件替换指南
 * 
 * 本文件提供了在项目中使用CustomPopup替代van-dialog组件的方法和指导。
 */

import { ref } from 'vue';
import { Dialog } from 'vant';

/**
 * 使用方式：
 * 
 * 1. 在您的Vue组件中导入:
 * ```
 * import { useDialog } from '@/utils/dialogHelper';
 * ```
 * 
 * 2. 在setup函数中初始化:
 * ```
 * const { showDialog, dialogTitle, dialogContent, dialogActions, handleConfirm, handleCancel } = useDialog();
 * ```
 * 
 * 3. 在模板中使用CustomPopup组件:
 * ```
 * <CustomPopup
 *   v-model:show="showDialog"
 *   :title="dialogTitle"
 *   @close="handleDialogClose"
 * >
 *   <div>{{ dialogContent }}</div>
 *   
 *   <template #footer>
 *     <div class="popup-footer-buttons">
 *       <van-button plain type="default" @click="handleCancel">取消</van-button>
 *       <van-button type="primary" @click="handleConfirm">确认</van-button>
 *     </div>
 *   </template>
 * </CustomPopup>
 * ```
 * 
 * 4. 准备一个处理对话框关闭的方法:
 * ```
 * const handleDialogClose = () => {
 *   // 处理对话框关闭时的逻辑
 *   handleCancel();
 * };
 * ```
 * 
 * 5. 打开对话框:
 * ```
 * openDialog({
 *   title: '标题',
 *   content: '内容',
 *   onConfirm: () => {
 *     // 用户点击确认按钮时的逻辑
 *     console.log('Confirmed');
 *   },
 *   onCancel: () => {
 *     // 用户点击取消按钮时的逻辑
 *     console.log('Cancelled');
 *   }
 * });
 * ```
 */

export function useDialog() {
  const showDialog = ref(false);
  const dialogTitle = ref('');
  const dialogContent = ref('');
  
  // 保存回调函数
  let confirmCallback = null;
  let cancelCallback = null;
  
  /**
   * 打开对话框
   * @param {Object} options 对话框配置
   * @param {string} options.title 对话框标题
   * @param {string} options.content 对话框内容
   * @param {Function} options.onConfirm 确认按钮回调
   * @param {Function} options.onCancel 取消按钮回调
   */
  const openDialog = (options) => {
    dialogTitle.value = options.title || '提示';
    dialogContent.value = options.content || '';
    confirmCallback = options.onConfirm || null;
    cancelCallback = options.onCancel || null;
    
    // 显示对话框
    showDialog.value = true;
  };
  
  /**
   * 处理确认按钮点击
   */
  const handleConfirm = () => {
    if (typeof confirmCallback === 'function') {
      confirmCallback();
    }
    showDialog.value = false;
  };
  
  /**
   * 处理取消按钮点击
   */
  const handleCancel = () => {
    if (typeof cancelCallback === 'function') {
      cancelCallback();
    }
    showDialog.value = false;
  };
  
  return {
    showDialog,
    dialogTitle,
    dialogContent,
    openDialog,
    handleConfirm,
    handleCancel
  };
}

/**
 * 兼容Vant Dialog API的便捷方法
 * 可用于替代Vant Dialog的alert和confirm方法
 */
export const CompatDialog = {
  /**
   * 显示提示对话框
   * @param {Object|string} options 配置对象或内容字符串
   * @returns {Promise} Promise对象
   */
  alert(options) {
    if (typeof options === 'string') {
      options = { message: options };
    }
    
    return Dialog.alert(options);
  },
  
  /**
   * 显示确认对话框
   * @param {Object|string} options 配置对象或内容字符串
   * @returns {Promise} Promise对象
   */
  confirm(options) {
    if (typeof options === 'string') {
      options = { message: options };
    }
    
    return Dialog.confirm(options);
  }
};

/**
 * Dialog组件替换清单
 * 
 * 1. 删除van-dialog组件，替换为CustomPopup
 * 2. 更改事件处理方式:
 *    - @confirm -> 使用自定义确认按钮
 *    - :before-close -> 使用@close事件
 * 3. 更新按钮布局:
 *    - 使用template #footer插槽添加自定义按钮
 * 4. 更新组件引用:
 *    - 添加import CustomPopup from '@/components/CustomPopup.vue'
 *    - 在components中注册CustomPopup
 * 
 * 注意: 对于不直接使用组件，而是调用Dialog API (如Dialog.confirm)的情况，
 * 可以继续使用Vant的Dialog API，无需修改。
 */ 